<script>
  import Vue from 'vue';
  import Component from 'vue-class-component';

  import personal from "./personal.vue";
  import topNav from "./topNav.vue"
  import RandomBlogComponent from "./RandomBlogComponent.vue"
  import bottomInfo from "../components/bottomInfo.vue"

  export default {
    components: {
      personal,
      topNav,
      RandomBlogComponent,
      bottomInfo
    }
  }
</script>

<template>
  <div ref="app" class="app">
    <topNav></topNav>
    <el-container class="middle" style="min-height: 100vh">
      <el-aside style="position: relative;">
        <personal></personal>
      </el-aside>
      <el-main style="margin-top: 40px;width: 55vw;overflow: hidden">
      </el-main>
      <el-aside style="position:relative;">
        <RandomBlogComponent></RandomBlogComponent>
      </el-aside>
    </el-container>
    <bottomInfo></bottomInfo>
  </div>
</template>

<style>
  @import "../assets/common.css";
</style>
